<template>
  <div class="timeoutRule">
    超时
    <el-input-number v-model="props.modelValue" :min="0" :max="maxTime" @change="inputChange" />
    <el-select v-model="props.time_unit" @change="selectChange">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.label"
        :value="item.id"
      />
    </el-select>
    未回复客户，系统将向员工推送超时提醒
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, computed, nextTick } from 'vue'

  let maxTime = computed(()=>{
    switch(props.time_unit){
      case 1:
        return 24 * 60
      break;
      case 2:
        return 24
      break;
      default:
        return 24 * 60
      break;
    }
  })
  let options = reactive([
    {
      id: 1,
      label: '分'
    },
    {
      id: 2,
      label: '时'
    }
  ])
  type Props = {
    modelValue: number
    time_unit: number
  }
  const props = withDefaults(defineProps<Props>(), {
    modelValue: 1,
    time_unit: 1
  })
  const emit = defineEmits(['update:modelValue', 'update:time_unit'])
  const inputChange = (val:number)=>{
    emit('update:modelValue', val)
  }
  const selectChange = (val:number)=>{
    emit('update:time_unit', val)
  }

</script>
<style scoped lang="scss">
  .timeoutRule{
    white-space: nowrap;
    display: flex;
    align-items: center;
    .el-input-number{
      margin: 0 8px;
      width: 120px;
    }
    .el-select{
      margin: 0 8px;
      width: 120px;
    }
  }
</style>
